<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息展示</title>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}">
    <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%"
       data-options="
       rownumbers:true,
       singleSelect:true,
       fit:true,
       fitColumns:true,
       url:'/student/pageSelect.do',
       method:'get',
       toolbar:toolbar,
       pagination:true,
       pageSize:10,
       rowStyler: function(index,row){
                    if ((row.id % 2)===0){
                        return 'background-color:#6293BB;color:#fff;font-weight:bold;';
                    }
                }
        ">
    <thead>
    <tr>
        <th data-options="field:'id',width:80,align:'center',checkbox:true">学生编号</th>
        <th data-options="field:'studentNo',width:100,align:'center'">学号</th>
        <th data-options="field:'name',width:80,align:'center'">姓名</th>
        <th data-options="field:'age',width:80,align:'center',styler:cellStyler">年龄</th>
        <th data-options="field:'gender',width:60,align:'center'">性别</th>
        <th data-options="field:'birthday',width:240,align:'center'">出生日期</th>
    </tr>
    </thead>
</table>
<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:310px;padding:10px"
     data-options="
                iconCls: 'icon-save',
                closed:true,
                buttons: [{
                    text:'Ok',
                    iconCls:'icon-ok',
                    handler:function(){
                        submitForm();
                    }
                },{
                    text:'Cancel',
                    handler:function(){
                        clearForm();
                    }
                }]
            ">
</div>
<script type="text/javascript">
    /***************年龄字段的样式**********/
    function cellStyler(value,row,index){//如果是未成年 那么我就加颜色
        if (value < 18){
            return 'color:red;';
        }
    }
    /**************************/
    var toolbar = [{
        text:'添加',
        iconCls:'icon-add',
        handler:function(){
            //打开对话框
            $('#dlg').dialog('open')
            //设置对话框的标题
            $('#dlg').dialog('setTitle',"添加")
            //加载子页面
            $('#dlg').dialog('refresh',"/student/addPage");
        }
    },{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){
            //首先第一步：选择对应的行
            let datagrid = $('#dg').datagrid('getSelected');

            //如果用户没有选择行
            if (datagrid === null){
                //警告
                $.messager.alert('警告','请您选择需要删除的行!','warning');
                return;
            }

            //如果程序走到这里：就说明用户已经选择了行
            //此时就可以调用后端接口来进行数据的删除
            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
                if (r){
                    //请求后端接口：JQuery--》Ajax
                    $.ajax({
                        url: "/student/deleteStudent.do",    // 必选，请求的URL
                        type: "post",       // 可选，默认GET（常用GET/POST）
                        data: {id: datagrid.id},      // 可选，请求参数（对象/字符串）
                        success: function(response) { // 成功回调（响应状态码200）
                            // 处理成功响应
                            //使用JQuery--》Ajax 请求 后端的数据是一个JSON对象(默认已经从JSON字符串转换为对象)
                            if (response.success === true){
                                $.messager.show({
                                    title:'提示',
                                    msg: response.message,
                                    timeout:500
                                });
                                //重新加载数据
                                $('#dg').datagrid('reload');
                            }else {
                                $.messager.alert('异常',response.message,'error');
                            }

                        },
                        error: function(xhr) {   // 失败回调（状态码非200或网络错误）
                            console.error("请求失败，状态码：", xhr.status);
                            alert("获取数据失败，请重试");                // 处理错误
                        }
                    });
                }
            });

        }
    },'-',{
        text:'修改',
        iconCls:'icon-edit',
        handler:function(){
            //首先第一步：选择对应的行
            let row = $('#dg').datagrid('getSelected');

            //如果用户没有选择行
            if (row === null){
                //警告
                $.messager.alert('警告','请您选择需要修改的行!','warning');
                return;
            }
            //打开对话框
            $('#dlg').dialog('open')
            //设置对话框的标题
            $('#dlg').dialog('setTitle',"修改")
            //加载子页面
            $('#dlg').dialog('refresh',"/student/updatePage/"+row.id);
        }
    }];
</script>
</body>
</html>






